<template>
	<view class="read-desk-container">
		<!-- 增强的动态背景装饰 -->
		<view class="dynamic-background">
			<view class="bg-shape shape-1"></view>
			<view class="bg-shape shape-2"></view>
			<view class="bg-shape shape-3"></view>
			<view class="bg-shape shape-4"></view>
			<!-- 添加额外的动态元素 -->
			<view class="bg-dot dot-1"></view>
			<view class="bg-dot dot-2"></view>
			<view class="bg-dot dot-3"></view>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-Y" style="height:100%;">
		
			<!-- 增强的动态背景装饰 -->
			<z-paging ref="paging" :auto="false" refresher-only use-page-scroll @onRefresh="onRefresh">
		
				<!-- 自定义导航栏 -->
				<template #top>
					<!-- 顶部导航栏：保留动态高度绑定 -->
					<view class="header" :style="{height: mainNavHeightValue + 'px'}">
						<view class="nav-content">
							<!-- 导航内层容器：保留动态边距和高度绑定 -->
							<view class="nav-inner-wrap"
								:style="{'margin-bottom': -stateHeightValue + 10 + 'px', 'height': navHeightValue + 'px'}">
								<text class="nav-title">{{$t('index.tab.book-case')}}</text>
							</view>
						</view>
					</view>
				</template>
		
				<!-- 空状态显示 -->
				<view v-if="list.length <= 0" class="empty-state">
					<view class="empty-icon">📚</view>
					<view class="empty-text">{{$t('bookcase.emptyTitle')}}</view>
					<view class="empty-subtext">{{$t('bookcase.emptySubtitle')}}</view>
				</view>
		
				<!-- 优化后的书籍列表项 -->
				<view v-else class="book-item" v-for="(item, index) in list" :key="index" @click="enterBookInfoDetail(item)"
					:class="{ 'book-item-animated': false }" :data-index="index" @longpress="editCollectionInfo(item)">
		
					<!-- 书籍封面 -->
					<view class="book-cover-wrapper">
						<image class="book-cover" :src="item.bookIconUrl || '/static/default_cover.png'" lazy-load
							mode="aspectFill" @error="onImageError($event, item)"></image>
					</view>
		
					<!-- 阅读进度指示器 -->
					<view class="progress-indicator">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: (item.progress || 0) + '%' }"></view>
						</view>
					</view>
		
					<!-- 书籍信息 -->
					<view class="book-info">
						<!-- 标题 -->
						<h3 class="book-title">{{item.bookName}}</h3>
						<!-- 元数据信息 -->
						<view class="book-meta">
							<view>
								<span class="author">{{item.author}}</span>
								<span class="meta-divider">·</span>
								<span class="read-time-info">{{item.progress + '%' || '0%'}}</span>
							</view>
							<!-- 分类标签 - 单独一行 -->
							<span class="book-category">{{item.cateName}}</span>
						</view>
		
						<!-- 简介 -->
						<view class="book-description">
							<p class="description-text">{{item.intro}}</p>
						</view>
					</view>
		
		
				</view>
		
		
			</z-paging>
		
		</scroll-view>
		
		<u-popup :show="editCollShow" overlay mode="bottom" closeOnClickOverlay :closeable="false" border-radius="14"
			bgColor="rgba(0,0,0,0)" @close="closePopWidtheditCollClick">
			<view class="popup-content">
		
				<view class="popup-header">
					<view class="popup-cover">
						<image class="book-cover" :src="selectItemInfo.bookIconUrl" mode="aspectFill"></image>
					</view>
					<view class="popup-info">
						<view class="bookBaseInfoStyle">
							<view class="popup-title">
								<label class="book-name">{{selectItemInfo.bookName}}</label>
							</view>
							<view class="popup-cate">
								<label class="book-cate">{{selectItemInfo.cateName}}</label>
							</view>
							<view class="popup-author">
								<label class="book-author">{{selectItemInfo.author}}</label>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-body">
		
					<u-grid :col="3" class="popup-grid">
						<u-grid-item v-for="(item, index) in gridlist" :key="index" :customStyle="{height:80+'px'}" @click="bookInfoOpeClick(item)">
							<view class="iconfont hover-class-iconfont grid-icon" :class="item.icon"
								:style="{color:item.color}"></view>
							<text class="grid-text" :style="{color:item.color}">{{ item.text }}</text>
						</u-grid-item>
					</u-grid>
		
				</view>
			</view>
		</u-popup>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {

				sysInfoRes: null,
				navHeightValue: 44,
				stateHeightValue: 0,
				mainNavHeightValue: 0,
				mainTabBarHeight: 50,

				list: [],
				editCollShow: false,

				gridlist: [{
						icon: 'icon-shuji1',
						text: this.$t('bookcase.detailBtn'),
						color: '#2979ff',
						code:"1"
					},
					{
						icon: 'icon-jichutubiao-XC-mulu',
						text: this.$t('bookcase.chapterBtn'),
						color: "#19be6b",
						code:"2"
					},
					{
						icon: 'icon-shanchu',
						text: this.$t('bookcase.deleteBtn'),
						color: "#ff5500",
						code:"3"
					},
					{
						icon: 'icon-qingkonghuancun',
						text: this.$t('bookcase.clearCacheBtn'),
						color: "#aa55ff",
						code:"4"
					}
				],
				selectItemInfo: {}


			};
		},

		mounted() {

			this.onRefresh();
		},

		onShow() {


		},

		onUnmounted() {

		},

		created() {

			this.sysInfoRes = uni.getSystemInfoSync();
			this.stateHeightValue = this.sysInfoRes.statusBarHeight;
			this.mainNavHeightValue = this.navHeightValue + this.stateHeightValue;

		},
		methods: {

			onRefresh() {
				this.getCollectionDataList()
			},

			async getCollectionDataList() {

				var that = this;
				var res = await that.$sqlDBConfig.selectCollectionTableData2();
				var collDatas = [];
				that.list = [];
				res.forEach(function(item, index) {
					var itemDetail = JSON.parse(item.bookinfo);
					collDatas.push(itemDetail)
				})
				that.list = collDatas;


				that.list.forEach(function(item, index) {
					let readInfo = uni.getStorageSync("readProcessData" + item
						.bookCode);
					if (readInfo && readInfo.readProcessData && readInfo.readProcessData
						.detail) {
						// 添加阅读进度
						item.progress = (readInfo.readProcessData.detail
							.progress).toFixed(2);
					} else {
						item.progress = 0;
					}
				})

				that.$refs.paging.complete()


			},

			enterBookInfoDetail(e) {

				var bookInfoStr = JSON.stringify(e);
				uni.navigateTo({
					url: '/pages/baseBusiness/bookInfoDetail/bookInfoDetailView?bookInfo=' + bookInfoStr
				})
			},

			//  长按实践
			editCollectionInfo(e) {
				this.editCollShow = true;
				this.selectItemInfo = e
			},
			closePopWidtheditCollClick(e) {
				this.editCollShow = false;
			},
			bookInfoOpeClick(item){
				let that = this;
				that.editCollShow = false;
				if(item.code == '1'){
					var bookInfoStr = JSON.stringify(that.selectItemInfo);
					uni.navigateTo({
						url: '/pages/baseBusiness/bookInfoDetail/bookInfoDetailView?bookInfo=' + bookInfoStr
					})
				}else if(item.code == '2'){
					
					
					let readInfo = uni.getStorageSync("readProcessData" + that.selectItemInfo.bookCode);
					let chapterIndex = 0;
					if(readInfo == null || readInfo == ""){
						chapterIndex = 1
					}else{
						chapterIndex =readInfo.readProcessData.detail.index
					}
					
					
					uni.navigateTo({
						url: '/pages/baseBusiness/readDetail/aNovelDirectory/aNovelDirectoryView?bookCode=' + that.selectItemInfo.bookCode +
							"&chapterIndex=" + chapterIndex + "&pageType=bookDetail"
					})
					
					
				}else if(item.code == '3'){
			
					that.$sqlDBConfig.deleteCollectionTableTableData(that.selectItemInfo,(type, res) => {
						console.log(type,res);
						if(type == "success"){
							that.onRefresh();
						}else{
							uni.showToast({
								title: that.$t('bookInfoDetail.removeBookError'),
								icon: 'none'
							});
						}
					});
					
					
				}else if(item.code == '4'){
					uni.removeStorageSync("readProcessData" + that.selectItemInfo.bookCode);
					that.$sqlDBConfig.deleteCollectionTableTableData(that.selectItemInfo,(type, res) => {
						console.log(type,res);
						if(type == "success"){
							that.onRefresh();
						}else{
							uni.showToast({
								title: that.$t('bookInfoDetail.removeBookError'),
								icon: 'none'
							});
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 全局样式变量
	$primary-color: #d4237a;
	$secondary-color: #5AC8FA;
	$text-primary: #333;
	$text-secondary: #666;
	$text-tertiary: #888;
	$border-color: #e4e7ed;
	$bg-primary: #ffffff;
	$bg-secondary: #f8f9fa;
	$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
	$shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
	$border-radius: 12px;
	$spacing-xs: 4px;
	$spacing-sm: 8px;
	$spacing-md: 12px;
	$spacing-lg: 16px;
	$spacing-xl: 20px;
	$skeleton-bg: #f0f0f0;
	$skeleton-shine: rgba(255, 255, 255, 0.6);

	.read-desk-container {
		width: 100%;
		height: 100%;
		background-color: $bg-secondary;
		position: relative;
		overflow: hidden;
	}

	/* 优化内容区域滚动，解决滑动冲突 */
	.content-wrapper {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.read-desk-container {
		width: 100%;
		height: 100%;
		background-color: $bg-secondary;
		position: relative;
		overflow: hidden;
	}
	
	/* 优化内容区域滚动，解决滑动冲突 */
	.content-wrapper {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	
	// 增强的动态背景装饰 - 确保动态效果
	.dynamic-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;
		// 增强背景效果
		background-color: $bg-secondary;
		// 添加背景渐变效果
		background-image:
			radial-gradient(circle at 50% 20%, rgba(0, 122, 255, 0.08), transparent 70%),
			radial-gradient(circle at 80% 60%, rgba(90, 200, 250, 0.05), transparent 60%);
		// 添加背景动画
		animation: subtleBgMove 30s ease-in-out infinite;
	}
	
	@keyframes subtleBgMove {
	
		0%,
		100% {
			background-position: 0% 0%, 100% 100%;
		}
	
		50% {
			background-position: 20% 10%, 80% 90%;
		}
	}
	
	.bg-shape {
		position: absolute;
		background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), transparent);
		border-radius: 50%;
		animation: float-shape 15s ease-in-out infinite;
		// 增强形状效果
		backdrop-filter: blur(30px);
	}
	
	// 额外的动态点元素
	.bg-dot {
		position: absolute;
		background: rgba(0, 122, 255, 0.2);
		border-radius: 50%;
		animation: dot-float 8s ease-in-out infinite;
	}
	
	.dot-1 {
		top: 25%;
		left: 15%;
		width: 10px;
		height: 10px;
		animation-delay: 1s;
	}
	
	.dot-2 {
		top: 60%;
		right: 25%;
		width: 8px;
		height: 8px;
		animation-delay: 3s;
	}
	
	.dot-3 {
		bottom: 15%;
		left: 40%;
		width: 6px;
		height: 6px;
		animation-delay: 5s;
	}
	
	@keyframes dot-float {
	
		0%,
		100% {
			transform: translateY(0) scale(1);
			opacity: 0.3;
		}
	
		50% {
			transform: translateY(-20px) scale(1.5);
			opacity: 0.8;
		}
	}
	
	.shape-1 {
		top: 10%;
		left: -10%;
		width: 40vw;
		height: 40vw;
		animation-delay: 0s;
	}
	
	.shape-2 {
		top: 50%;
		right: -15%;
		width: 50vw;
		height: 50vw;
		animation-delay: 2s;
		animation-duration: 20s;
	}
	
	.shape-3 {
		bottom: 10%;
		left: 30%;
		width: 30vw;
		height: 30vw;
		animation-delay: 4s;
		animation-duration: 18s;
	}
	
	.shape-4 {
		top: 30%;
		right: 20%;
		width: 20vw;
		height: 20vw;
		animation-delay: 6s;
		animation-duration: 16s;
	}
	
	@keyframes float-shape {
	
		0%,
		100% {
			transform: translate(0, 0) rotate(0deg);
		}
	
		25% {
			transform: translate(10px, -10px) rotate(5deg);
		}
	
		50% {
			transform: translate(0, -20px) rotate(0deg);
		}
	
		75% {
			transform: translate(-10px, -10px) rotate(-5deg);
		}
	}

	// 内容区域
	.content-area {
		width: 100%;
		background-color: transparent;
	}

	// 骨架屏样式
	.skeleton-container {
		padding: $spacing-lg;
	}

	.skeleton-item {
		display: flex;
		margin-bottom: $spacing-lg;
		align-items: flex-start;
		padding: $spacing-lg;
		background: $bg-primary;
		border-radius: $border-radius;
		box-shadow: $shadow-light;
	}

	.skeleton-cover {
		width: 80px;
		height: 112px;
		border-radius: 8px;
		background: $skeleton-bg;
		overflow: hidden;
		position: relative;
		animation: skeleton-loading 1.5s infinite;
	}

	.skeleton-content {
		margin-left: $spacing-lg;
		flex: 1;
		width: 100%;
	}

	.skeleton-title {
		width: 70%;
		height: 22px;
		border-radius: 4px;
		background: $skeleton-bg;
		margin-bottom: $spacing-sm;
		animation: skeleton-loading 1.5s infinite 0.2s;
	}

	.skeleton-meta {
		width: 50%;
		height: 18px;
		border-radius: 4px;
		background: $skeleton-bg;
		margin-bottom: $spacing-sm;
		opacity: 0.7;
		animation: skeleton-loading 1.5s infinite 0.3s;
	}

	.skeleton-category {
		width: 60px;
		height: 20px;
		border-radius: 10px;
		background: $skeleton-bg;
		margin-bottom: $spacing-md;
		opacity: 0.6;
		animation: skeleton-loading 1.5s infinite 0.4s;
	}

	.skeleton-desc {
		height: 48px;
		border-radius: 4px;
		background: $skeleton-bg;
		opacity: 0.5;
		animation: skeleton-loading 1.5s infinite 0.5s;
	}

	@keyframes skeleton-loading {

		0%,
		100% {
			background-position: -200% 0;
		}

		50% {
			background-position: 200% 0;
		}
	}

	// 空状态样式
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// 添加动画
		animation: empty-fadeIn 0.8s ease-out;
		// 添加背景效果
		backdrop-filter: blur(10px);
		height:calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--status-bar-height) - 0px - 50px);
	}

	.empty-icon {
		font-size: 64px;
		margin-bottom: $spacing-lg;
		opacity: 0.5;
		// 添加悬浮动画
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	.empty-text {
		font-size: 16px;
		color: $text-secondary;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.empty-subtext {
		font-size: 14px;
		color: $text-tertiary;
	}

	// 优化的书籍列表项样式
	.book-item {
		display: flex;
		align-items: flex-start;
		margin: $spacing-md $spacing-lg;
		padding: $spacing-lg;
		background: $bg-primary;
		border-radius: $border-radius;
		box-shadow: $shadow-light;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		// 增强深度感
		transform: translateY(0);
		z-index: 1;

		// 简化装饰元素
		&::before {
			content: '';
			position: absolute;
			bottom: -30px;
			right: -30px;
			width: 100px;
			height: 100px;
			background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), transparent);
			border-radius: 50%;
		}
	}

	.book-item:hover {
		transform: translateY(-2px);
		box-shadow: $shadow-medium;

		&::after {
			opacity: 1;
		}
	}

	// 添加动画效果
	.book-item-animated {
		animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	}

	@keyframes slideInUp {
		from {
			transform: translateY(20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	// 为不同的列表项添加延迟动画
	.book-item[data-index="0"] {
		animation-delay: 0.1s;
	}

	.book-item[data-index="1"] {
		animation-delay: 0.2s;
	}

	.book-item[data-index="2"] {
		animation-delay: 0.3s;
	}

	.book-item[data-index="3"] {
		animation-delay: 0.4s;
	}

	.book-item[data-index="4"] {
		animation-delay: 0.5s;
	}

	.book-item[data-index="5"] {
		animation-delay: 0.6s;
	}

	.book-item[data-index="6"] {
		animation-delay: 0.7s;
	}

	.book-item[data-index="7"] {
		animation-delay: 0.8s;
	}

	.book-item[data-index="8"] {
		animation-delay: 0.9s;
	}

	.book-item[data-index="9"] {
		animation-delay: 1s;
	}

	// 点击效果
	.book-item:active {
		transform: scale(0.98);
		box-shadow: $shadow-medium;
		background: linear-gradient(135deg, $bg-primary, #f0f2f5);
	}

	// 书籍封面
	.book-cover-wrapper {
		position: relative;
		width: 80px;
		height: 112px;
		flex-shrink: 0;
	}

	// 书籍封面 - 优化3D效果
	.book-cover {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		// 添加3D效果
		transform-style: preserve-3d;
		transform: rotateY(5deg) translateZ(5px);
		transition: all 0.3s ease;

		// 添加书脊效果
		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: -8px;
			width: 8px;
			height: 100%;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
			transform: rotateY(90deg);
			transform-origin: left center;
		}

		// 添加悬浮动画效果
		animation: cover-float 6s ease-in-out infinite;
	}

	@keyframes cover-float {

		0%,
		100% {
			transform: translateY(0) rotateX(0deg) rotateY(5deg) translateZ(5px);
		}

		25% {
			transform: translateY(-2px) rotateX(1deg) rotateY(-1deg) translateZ(5px);
		}

		50% {
			transform: translateY(0) rotateX(0deg) rotateY(5deg) translateZ(5px);
		}

		75% {
			transform: translateY(-2px) rotateX(-1deg) rotateY(1deg) translateZ(5px);
		}
	}

	.book-item:hover .book-cover {
		transform: translateY(-4px) rotateX(2deg) rotateY(0deg) translateZ(8px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	}

	.book-item:active .book-cover {
		transform: rotateY(15deg) rotateX(5deg) translateZ(10px) scale(1.05);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
		animation: pulse 0.5s ease-in-out;
	}

	@keyframes pulse {

		0%,
		100% {
			transform: rotateY(15deg) rotateX(5deg) translateZ(10px) scale(1.05);
		}

		50% {
			transform: rotateY(18deg) rotateX(7deg) translateZ(12px) scale(1.08);
		}
	}

	// 阅读进度指示器
	.progress-indicator {
		position: absolute;
		bottom: 8px;
		left: 8px;
		right: 8px;
		height: 3px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3px;
		overflow: hidden;
		display: flex;
		align-items: center;
	}


	// 阅读进度条 - 增强视觉效果
	.progress-bar {
		width: 100%;
		height: 100%;
		// 添加进度条背景纹理
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
		background-size: 8px 8px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, $primary-color, $secondary-color);
		border-radius: 3px;
		// 添加进度条动画
		animation: progressGrow 0s ease-out;
	}

	@keyframes progressGrow {
		from {
			width: 0;
		}

		to {
			width: inherit;
		}
	}

	// 书籍信息 - 再次优化布局和协调性
	.book-info {
		flex: 1;
		margin-left: $spacing-lg;
		display: flex;
		flex-direction: column;
		// 为内容提供足够空间，避免拥挤
		min-height: 112px;
		justify-content: space-between;
		// 添加卡片内边距感
		padding: 2px;
	}

	// 分类标签 - 与标题分行显示
	.book-category {
		font-size: 12px;
		color: $text-tertiary;
		background: $bg-secondary;
		border-radius: 12px;
		white-space: nowrap;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 3px;
		padding-bottom: 3px;
		// 添加细微的边框
		border: 1px solid rgba(0, 0, 0, 0.03);
		// 添加动画
		transition: all 0.3s ease;
		margin-left: 20px;
	}

	// 调整标题样式
	.book-title {
		font-size: 17px;
		font-weight: bold;
		color: $text-primary;
		margin: 0 0 $spacing-xs 0;
		// 防止标题过长
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		// 添加标题效果
		position: relative;
		z-index: 1;
		// 优化标题排版
		letter-spacing: 0.5px;
	}

	.book-item:hover .book-category {
		background: rgba(0, 122, 255, 0.05);
		color: $primary-color;
	}

	// 元数据信息
	.book-meta {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-sm;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
	}

	.author {
		font-size: 13px;
		color: $text-secondary;
		// 添加微妙的悬浮效果
		transition: color 0.3s ease;
	}

	.book-item:hover .author {
		color: $primary-color;
	}

	.meta-divider {
		font-size: 12px;
		color: $text-tertiary;
		margin: 0 4px;
	}

	.read-time-info {
		font-size: 12px;
		color: $primary-color;
		font-weight: 500;
		// 添加数字动画效果
		display: inline-block;
	}

	/* 最近阅读时间 */
	.last-read-info {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-xs;
		padding: 2px 0;
	}

	.clock-icon {
		margin-right: 4px;
	}

	.last-read-text {
		font-size: 11px;
		color: $text-tertiary;
	}

	// 简介 - 优化显示，避免拥挤
	.book-description {
		flex: 1;
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	.description-text {
		font-size: 13px;
		color: $text-tertiary;
		line-height: 1.6;
		margin: 0;
		display: -webkit-box;
		// 限制显示两行，避免占用过多空间
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		// 优化文字排版
		letter-spacing: 0.3px;
		word-spacing: 1px;
	}

	// 阅读状态 - 优化样式
	.read-status {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: $spacing-sm;
		padding-top: $spacing-sm;
		// 美化分割线
		border-top: 1px solid rgba(0, 0, 0, 0.03);
	}


	.btn-arrow {
		transition: transform 0.3s ease;
	}

	.book-item:hover .continue-reading::after {
		width: 100%;
	}

	// 阅读箭头 - 增强动画效果
	.read-arrow {
		padding: $spacing-xs;
		background: transparent;
		border-radius: 50%;
		// 添加旋转动画
		transition: all 0.3s ease;
		// 移除动画，避免视觉干扰
		touch-action: manipulation;
	}


	.book-item:hover .read-arrow {
		transform: translateX(3px);
	}

	.continue-reading-btn:hover .read-arrow {
		background: rgba(255, 255, 255, 0.2);
	}

	.continue-reading-btn:hover .read-arrow u-icon {
		color: white !important;
	}

	// 滚动条样式
	.content-area::-webkit-scrollbar {
		display: none;
	}

	.content-area {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}


	// 4. 顶部导航栏样式（原有用样式保留，无冗余）
	.header {
		width: 100%;
		z-index: 1000;
		background: linear-gradient(135deg, $primary-color, $secondary-color);
		overflow: hidden;
		display: flex;
		align-items: center;
		// 移除状态栏占位，直接使用固定高度
		padding-top: 0;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		max-width: 100%;
	}

	.nav-inner-wrap {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		color: white;
		font-size: 16px;
	}

	// 阅读进度指示器样式调整
	.progress-indicator {
		margin-top: 100px;
	}

	// 底部弹窗样式
	.popup-content {
		height: 350px;
		width: calc(100% - 30px);
		margin-left: 15px;
		background-color: #ffffff;
		border-radius: 15px;
	}

	.popup-header {
		height: 95px;
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.popup-cover {
		width: 86px;
		height: 115px;
		margin-top: -20px;
		margin-left: 20px;
	}

	.popup-info {
		width: calc(100% - 106px);
		height: 100%;
		display: flex;
		align-items: center;
	}

	.popup-title {
		height: 15px;
		width: 100%;
	}

	.popup-cate {
		height: 15px;
		width: 100%;
		margin-top: 5px;
	}

	.popup-author {
		height: 15px;
		width: 100%;
		margin-top: 5px;
	}

	.book-name {
		font-size: 12px;
		color: #007AFF;
	}

	.book-cate,
	.book-author {
		font-size: 12px;
		color: #888;
	}

	.popup-body {
		height: calc(100% - 95px);
		width: 100%;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}

	.popup-grid {
		width: 90%;
		flex-wrap: wrap;
		margin-top: 20px;
	}

	.grid-icon {
		font-size: 25px;
	}

	.grid-text {
		margin-top: 10px;
		font-size: 12px;
	}

	.item {
		height: 144px;
		border-bottom: solid 1px #eeeeee;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 修复底部弹窗信息区域样式
	.popup-info {
		padding-left: 10px;
	}

	.bookBaseInfoStyle {
		height: auto;
		width: calc(100% - 10px);
		display: flex;
		flex-direction: column;
	}
</style>